<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="mycanvas" height="210" width="210" style="border: 1px solid black;"></canvas>

  <div id="mydiv"></div>
  <script>
    window.onload = () => {
      const cav = document.querySelector("#mycanvas");
      const ctx = cav.getContext('2d');
      if (ctx) {


        ctx.rotate((Math.PI / 180) * -25); // rotate
        ctx.font = '18px serif';
        ctx.fillStyle = '#d3d3d3';

        ctx.fillText('Hello world', 10, 100);
        ctx.save();
      }

      // 
      const divE = document.querySelector("#mydiv");
      divE.style.cssText = `background-image: url(${cav.toDataURL()});
      height: 800px;width: 800px;
      background-repeat: repeat;`;
    }

  </script>
</body>

</html>